<!-- 出入库记录 -->
<template>
	<view class="inOutRecord">
		<view class="topSearch border_bm flex_sb">
			<uni-search-bar v-model="searchValue" @blur="search" @clear="search" class="searchBox" cancelButton="none"
				radius="17" placeholder="单号搜索"></uni-search-bar>
			<view class="left">
				<!-- <picker @change="bindPickerChange" :value="arrayIndex" :range="array" v-if="tagIndex == 0">
					<view class="leftTxt">{{array[arrayIndex]}}
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</picker> -->

				<picker mode="date" :value="date" @change="bindDateChange" fields="month">
					<view class="leftTxt">{{date || '全部'}}
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</picker>
			</view>
		</view>
		<view class="topBox flex_sb">
			<view class="topItem" :class="{'topItemActive':tagIndex == index}" v-for="(item,index) in tagList" :key="index"
				@click="tagChange(index)">
				{{item}}
			</view>
		</view>

		<view class="card border_bm" v-for="(sa,idx) in dataList" :key="idx" @click="toDetail(sa.id)">
			<view class="flex_sb">
				<view class="Title">{{sa.title}}</view>
				<view class="goldPrice">{{sa.weight}}</view>
			</view>
			<view class="floorBox">
				<view class="infoGrey">关联单号：{{sa.order_sn}}</view>
				<view class="infoGrey">{{sa.add_time}}</view>
			</view>
		</view>
		
		<view class="notTips">
			没有更多数据了！
		</view>

	</view>
</template>

<script>
	import {
		postStockList
	} from '@/api/new_store.js'
	export default {
		data() {
			return {
				tagList: ['入库', '出库'],
				tagIndex: 0,
				array: ['全部'],
				arrayIndex: 0,
				searchValue: '',
				date: '',
				page: 1,
				limit: 10,
				log_type: 1,
				finish:false,
				dataList:[]
			}
		},
		onShow() {
			this.page = 1
			this.finish = false
			this.dataList = []
			this.postStockListFc()
		},
		onReachBottom() {
			if(!this.finish) {
				this.page ++
				this.postStockListFc()
			}
		},
		onReachBottomDistance: 100,
		methods: {
			postStockListFc() {
				let that = this
				let obj = {
					page: this.page,
					limit: this.limit,
					log_type: this.tagIndex + 1,
					order_sn:this.searchValue,
					time_search:this.date
				}
				postStockList(obj).then(res => {
					if (res.status != 200) return
					let arr = res.data
					if(arr.length < that.limit) {
						this.finish = true
					}
					that.dataList.push(...arr)
				})
			},
			tagChange(index) {
				this.tagIndex = index
				this.dataList = []
				this.page = 1
				this.date = ''
				this.finish = false
				this.postStockListFc()
			},
			search() {
				this.dataList = []
				this.page = 1
				this.finish = false
				this.postStockListFc()
			},
			bindPickerChange(e) {
				this.arrayIndex = e.detail.value
			},
			bindDateChange(e) {
				this.date = e.detail.value
				this.dataList = []
				this.page = 1
				this.finish = false
				this.postStockListFc()
			},
			toDetail(id) {
				this.$util.JumpPath('/pages/new_gold/goldWarehouse/inOutOrderDetail?id='+id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inOutRecord {
		position: relative;
		width: 100%;
		height: 100%;
		background: #F8F8FA;
		overflow-y: scroll;
		padding-top: 206rpx;
		padding-bottom: 200rpx;
	}

	.topSearch {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		padding: 0 32rpx;

		.searchBox {
			width: 485rpx;
		}

		.leftTxt {
			font-size: 32rpx;
			font-weight: 550;
			letter-spacing: 0rpx;
			line-height: 46.34rpx;
			color: rgba(64, 63, 63, 1);
			text-align: left;

			text {
				display: inline-block;
				font-size: 24rpx;
				transform: rotate(90deg);
				margin-left: 12rpx;
			}
		}
	}

	.topBox {
		position: fixed;
		top: 100rpx;
		left: 0;
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		padding: 0 152rpx;

		.topItem {
			height: 100rpx;
			position: relative;
			font-size: 32rpx;
			letter-spacing: 0rpx;
			line-height: 100rpx;
			color: rgba(48, 48, 48, 1);
			text-align: center;
		}

		.topItemActive {
			font-size: 32rpx;
			font-weight: 550;
			color: rgba(189, 145, 83, 1);
		}

		.topItemActive::before {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 4rpx;
			background: #BD9153;
		}
	}

	.card {
		width: 100%;
		background: #FFFFFF;
		padding: 26rpx 28rpx;
		margin-bottom: 4rpx;

		.Title {
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			color: rgba(48, 48, 48, 1);
			text-align: left;

			.grey {
				margin-left: 52rpx;
				color: rgba(102, 102, 117, 1);
			}
		}

		.goldPrice {
			font-size: 30rpx;
			font-weight: 550;
			line-height: 43.44rpx;
			color: rgba(212, 48, 48, 1);
			text-align: right;
		}

	}

	.floorBox {
		.infoGrey {
			font-size: 26rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 37.65rpx;
			color: rgba(122, 122, 122, 1);
			text-align: left;
			margin-top: 10rpx;
		}
	}

	.border_bm {
		border-bottom: 2rpx solid #F8F8FA;
	}
	
	.notTips {
		font-size: 24rpx;
		line-height: 34.75rpx;
		text-align: center;
		color: rgba(115, 115, 115, 1);
		margin: 100rpx auto 100rpx;
	}
</style>